<template>
	<view class="content">
		<view class="list" style="margin-top: 30rpx;">
			<view class="title" v-if="editnotice==false">
				公告内容填写
			</view>
			<view class="title" v-else>
				公告内容
			</view>
			<view class="item" @click="timeShow">
				<label>
					<image src="../../../static/icon/time.png" class="icon"></image>
					发布日期
				</label>
				<input v-model="noticetime" placeholder="请选择" disabled />
				<u-calendar :show="timeshow" @close="close" @confirm="confirm"></u-calendar>
			</view>

			<view class="item" @click="selectShow" v-if="editnotice==false">
				<label>
					<image src="../../../static/icon/status.png" class="icon"></image>
					公告状态
				</label>
				<u-radio-group v-model="noticestatus" @change="statusChange" placement="row">
					<u-radio :customStyle="{marginRight: '8px'}" v-for="(item, index) in statusArray" :key="index"
						:label="item.name" :name="item.name">
					</u-radio>
				</u-radio-group>
			</view>
			
			<view class="item">
				<label style="margin-right: 56rpx;">
					<image src="../../static/icon/title.png" class="icon"></image>
					标题
				</label>
				<input v-model="noticetitle" placeholder="请输入标题" />
			</view>
			<view class="item" style="border: none;">
				<label style="margin-right: 56rpx;">
					<image src="../../static/icon/section.png" class="icon"></image>
					内容
				</label>
			</view>
			<view class="textbox">
				<textarea placeholder="请输入内容" v-model="noticecontent" cols="30" rows="10" :disabled="editnotice==true"></textarea>
			</view>
		</view>
		<block v-if="editnotice==false">
		<view class="box" @click="sumbit" v-if="isadd==true">
			提交
		</view>
		<view class="box" @click="edit" v-else>
			修改
		</view>
		</block>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import api from '@/api/api'
	// 公告状态
	let noticestatus=ref('发布')
	const statusArray = [{
		name: '发布',
		disabled: false
	}, {
		name: '下架',
		disabled: false
	}]
	const statusChange = (n) => {
		console.log(n)
		noticestatus.value = n
	}
	
	// 时间
	let timeshow = ref(false),
		noticetime = ref('')
	const timeShow = () => {
		timeshow.value = true
	}
	const confirm = (e) => {
		noticetime.value = e[0]
		timeshow.value = false
	}
	const colse = () => {
		timeshow.value = false
	}
	
	let isadd = ref(true),noticeId='',editnotice=ref(false)
	onLoad((options) => {
		if (options.noticeId) {
			isadd.value = false
			api.getNoticeInfo({
				noticeId: options.noticeId
			}).then(res => {
				if (res.status == 200) {
					let info=res.data[0]
					noticeId=info.noticeId
					noticetitle.value=info.noticetitle
					noticecontent.value=info.noticecontent
					noticestatus.value=info.noticestatus==1?'发布':'下架'
					noticetime.value=info.noticetime.substring(0,10)
				}
				
			})
		}
		// 从首页跳转
		if(options.id){
			editnotice.value=true
			api.getNoticeInfo({
				noticeId: options.id
			}).then(res => {
				if (res.status == 200) {
					let info=res.data[0]
					noticetitle.value=info.noticetitle
					noticecontent.value=info.noticecontent
					noticetime.value=info.noticetime.substring(0,10)
				}
				
			})
			
		}
	})
	let noticetitle=ref(''),noticecontent=ref('')
	const sumbit = () => {
		api.noticeAdd({
			noticetitle:noticetitle.value,
			noticecontent:noticecontent.value,
			noticestatus:noticestatus.value,
			noticetime:noticetime.value
		}).then(res => {
			if (res.status == 200) {
				uni.showToast({
					title: '提交成功',
					duration: 1500,
					icon: 'none'
				})

				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				},1500)
			}
		})
	}


	const edit = () => {
		api.noticeEdit({
			noticetitle:noticetitle.value,
			noticecontent:noticecontent.value,
			noticestatus:noticestatus.value,
			noticetime:noticetime.value,
			noticeId:noticeId
		}).then(res => {
			if (res.status == 200) {
				uni.showToast({
					title: '修改成功',
					duration: 1500,
					icon: 'none'
				})
			
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				},1500)
			}
			
		})
	}

</script>

<style lang="scss">
	.content {
		.list {
			margin: 0 30rpx;
			box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(131, 130, 130, 0.28);
			margin-bottom: 30rpx;
			background-color: white;
			padding: 30rpx;
			border-radius: 16rpx;

			.title {
				font-size: 32rpx;
				font-weight: bold;
			}
			
			.textbox {
				display: block;
				border: #E6E6E6 1rpx solid;
				padding: 20rpx;
				border-radius: 16rpx;
			}

			.item {
				label {
					padding-right: 30rpx;
					font-size: 28rpx;
					color: #666666;
					display: flex;
					align-items: center;

					.icon {
						width: 40rpx;
						height: 40rpx;
						padding-right: 5rpx;
					}
				}


				input {
					flex: 1;
					font-size: 28rpx;
					color: #666666;
				}

				.type {
					flex: 1;
					font-size: 28rpx;
					color: #666666;
				}

				line-height: 100rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				border-bottom: #E6E6E6 1rpx solid;
			}
		}

		.box {
			margin: 10rpx 30rpx;
			background-color: #3B8AF4;
			color: white;
			font-size: 28rpx;
			padding: 20rpx 0;
			text-align: center;
			border-radius: 16rpx;
			box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(131, 130, 130, 0.28);
		}
	}
</style>
